<template>
	<u-popup v-model="show" mode="bottom">
		<view class="gridcontent">
			<view class="item">
				<text @click="TCShow=!TCShow">通川区</text>
				<view class="item1" v-for="(item,index) in selectList" :key="index" v-if="TCShow">
					<view class="item2">
						<text @click="TCShow2=!TCShow2">{{ item.depart.departName }}</text>
						<view class="item3" v-for="(it,i) in item.son" :key="i" v-if="TCShow2">
							<text @click="TCShow3=!TCShow3">{{ it.depart.departName }}</text>
							<view class="item4" v-for="(it2,i2) in it.son" :key="i2"  v-if="TCShow3" @click="confirmGird(it2.depart.departName,it2.depart.girdId)">
								{{ it2.depart.departName }}
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				selectList: [],
				TCShow:false,
				TCShow2:false,
				TCShow3:false,
			}
		},
		methods:{
			// 获取网格
			getGridList() {
				this.$u.api.getGridList()
					.then(res => {
						if (res.code == 200) {
							this.selectList = res.result.son
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gridcontent{
		height: 40vh;
		width: 100%;
		padding: 20rpx;
		color: #333;
		font-size: 27rpx;
		text-align: left;
		.item{
			width: 100%;
			padding: 5rpx 40rpx;
			overflow-y: auto;
			.item1{
				padding: 5rpx 40rpx;
				.item2{
					padding: 5rpx 40rpx;
					.item3{
						padding: 5rpx 40rpx;
						.item4{
							padding: 5rpx 40rpx;
							
						}
					}
				}
			}
		}
	}
</style>
